<template>
    <div>
      <div class="account-box" v-for="item in list" :key="item.id">
         <img v-if="item.payChannel === 1" class="seo-img" src="~@/assets/seo.png">
          <img v-if="item.payChannel === 2" class="sox-img" src="~@/assets/sox.png">
          <img v-if="item.payChannel === 3" class="plipay-img" src="~@/assets/plipay.jpg">
         <div class="account-title">基本信息</div>
        <div class="account-list">
          <div class="account-money">
            <img src="~@/assets/money.png" style="width:64px;height:64px">
            <div class="account-le-amount">
              <span>{{item.balance?item.balance:0}}</span>
              <label>账户余额(元)</label>
            </div>
          </div>
          <div class="account-body">
            <p class="account-ams">
              <span class="account-label">{{item.payChannel === 1?'招行账号：':'支付宝：'}} </span>
              <span class="account-val">{{item.payChannel >= 3 ? item.aliPayCardNo:item.accountNo}}
                <a-tag v-if="item.payChannel === 2 && item.accountStatus===1" color="green">已激活</a-tag>
                <a-tag v-if="item.payChannel === 2 && item.accountStatus===2" color="orange">待激活</a-tag>
                <a-tag v-if="item.payChannel === 2 && item.accountStatus===3" color="#f50">已销户</a-tag>
                 <a-tag v-if="item.payChannel >= 3 && item.accountStatus===1" color="green">已激活</a-tag>
                <a-tag v-if="item.payChannel >= 3 && item.accountStatus===2" color="orange">待激活</a-tag>
                <a-tag v-if="item.payChannel >= 3 && item.accountStatus===3" color="#f50">已销户</a-tag>
              </span>
            </p>
            <p class="account-ams">
              <span class="account-label">账户名称：</span>
              <span class="account-val">{{item.accountName}}</span>
            </p>
            <p class="account-ams">
              <span class="account-label">开户行：</span>
              <span class="account-val">{{item.bankName?item.bankName:'--'}}</span>
            </p>
            <p class="account-ams" v-if="userInfo.type === 2">
              <span class="account-label">{{item.payChannel === 1 || item.payChannel === 3?'关联园区名称：':'企业银行账号：'}}</span>
              <span class="account-val">{{item.payChannel === 1 || item.payChannel === 3?item.parkName:item.corporateAccount}}</span>
            </p>
            <p class="account-ams" v-if="userInfo.type === 3 && item.payChannel === 2">
              <span class="account-label">{{item.payChannel === 1?'关联园区名称：':'企业银行账号：'}}</span>
              <span class="account-val">{{item.payChannel === 1?item.parkName:item.corporateAccount}}</span>
            </p>
          </div>
          <div class="account-body borders" v-if="item.payChannel === 1 && userInfo.type === 2">
            <div class="account-title">转账充值信息</div>
             <p class="account-ams">
              <span class="account-label">账号名称：</span>
              <span class="account-val">{{item.parkName?item.parkName:'--'}}</span>
            </p>
            <p class="account-ams">
              <span class="account-label">开户账号：</span>
              <span class="account-val">{{item.settleAccountNo?item.settleAccountNo:'--'}}</span>
            </p>
            <p class="account-ams">
              <span class="account-label">开户行：</span>
              <span class="account-val">{{item.bankName?item.bankName:'--'}}</span>
            </p>
          </div>
          <div class="account-body borders" style="top: -30px;" v-if="item.payChannel === 3 || item.payChannel === 4 && userInfo.type === 2">
            <div class="account-title">转账充值信息</div>
             <p class="account-ams">
              <span class="account-label">户名：</span>
              <span class="account-val">支付宝（中国）网络技术有限公司</span>
            </p>
            <p class="account-ams">
              <span class="account-label">账户：</span>
              <span class="account-val">{{item.aliPayCardNo}}</span>
            </p>
            <p class="account-ams">
              <span class="account-label">银行：</span>
              <span class="account-val">支付机构备付金集中存管账户</span>
            </p>
            <p class="account-ams">
              <span class="account-label">支行：</span>
              <span class="account-val">支付宝-备付金账户</span>
            </p>
            <p class="account-ams">
              <span class="account-label">开户地：</span>
              <span class="account-val">上海市-上海市</span>
            </p>
            <p class="account-ams">
              <span class="account-label">联行号：</span>
              <span class="account-val">991290000015</span>
            </p>
          </div>
          <div class="account-btn">
            <span v-show="item.payChannel === 1">
              <a-button type="primary" @click="findBank(item)" v-action:accountBankBtn style="min-width: 130px;" ghost>查看付款帐号</a-button>
            </span>
          </div>
        </div>
      </div>

      <div class="warpper-box" v-if="list.length === 0">
        <a-empty/>
      </div>

       <a-modal title="付款帐号列表" :width="500" class="custom-modal" @cancel="visible=false" :visible="visible" :footer="null">
        <a-form-model style="padding:0 24px">
            <a-form-model-item label="付款账号" v-for="(domain,index) in bankList" :key="index">
              <a-input :disabled="true" v-model="domain.bankCardNum"/>
            </a-form-model-item>
        </a-form-model>
        <div class="ant-modal-footer">
          <a-button @click="visible=false">取消</a-button>
        </div>
      </a-modal>
    </div>
</template>

<script>
import store from '@/store'
import { 
  getMyAccountList,
  applyCash,
  getSysEnterpriseCmbPayAccount,
  cashSendCode
} from '@/api/manage/openAccount'
import { mapGetters } from 'vuex'
export default {
  name: 'accountInfo',
  data () {
    return {
      list:[],
      bankList:[],
      visible:false,
      cash:{
        visible:false,
        title:'提现',
        bankNo:'',
        phone:'',
        smsCode:'',
        amount:'',
        isAmount:''
      },
      submitLoading:false,
      getCodeText:'获取验证码',
      canClick:true, 
      totalTime:60
    }
  },
  computed: {
    ...mapGetters(['userInfo','userDetail'])
  },
  created () {
    this.loadAccount();
  },
  methods: {
    async loadAccount(){
      const {code,data} = await getMyAccountList();
      if(code === '1'){
        this.list = data !== null ? data:[];
      }
    },
    async getVerificationCode(){
      const {code} = await cashSendCode();
      if(code === '1'){
          this.verificationCode();
      }
    },
    verificationCode() {
      if (!this.canClick) return  
      this.canClick = false
      this.getCodeText = this.totalTime + 's后重新发送'
      this.clock = window.setInterval(() => {
        this.totalTime--
        this.getCodeText = this.totalTime + 's后重新发送'
        if (this.totalTime < 0) {
          window.clearInterval(this.clock)
          this.getCodeText = '重新发送验证码'
          this.totalTime = 60
          this.canClick = true  
        }
      },1000)
    },
    allAmout(){
      this.cash.amount = this.cash.isAmount;
    },
     handleAmount(rule,value, callback){
      const reg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
      if(!reg.test(value)){
        callback('提现金额整数，或保留2位小数');
      }
      let lastStr = value.toString().split('.');
      let isAmount = this.cash.isAmount.toString().split('.');
      if(parseInt(lastStr[0]) > parseInt(isAmount[0])){
        callback('提现金额不能大于余额');
      }else if(parseInt(lastStr[0]) === parseInt(isAmount[0])){
        if(lastStr[1] !== undefined && isAmount[1] != undefined){
          if(lastStr[1].length > isAmount[1].length){
            callback('提现金额不能大于余额');
          }else if(parseInt(lastStr[1]) > parseInt(isAmount[1])){
            callback('提现金额不能大于余额');
          }
        }else if(lastStr[1] !== undefined && isAmount[1] == undefined){
          callback('提现金额不能大于余额');
        }
      }else if(parseInt(lastStr[0]) < parseInt(isAmount[0])){
        if(lastStr[1] !== undefined && isAmount[1] != undefined){
          if(lastStr[1].length > isAmount[1].length){
            callback('提现金额不能大于余额');
          }else if(parseInt(lastStr[1]) > parseInt(isAmount[1])){
            callback('提现金额不能大于余额');
          }
        }
      }
      callback()
    },
    submitCash(formName){
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const {cash} = this;
          let params = {
            amount:cash.amount,
            smsCode:cash.smsCode
          }
          this.submitLoading = true;
          const {code} = await applyCash(params);
          this.submitLoading = false;
          if(code === '1'){
            this.$message.success('操作成功');
            this.visible = false;
            this.loadAccount();
          }
        }else{
          return false;
        }
      });
    },
    async findBank(rows){
      const {data} = await getSysEnterpriseCmbPayAccount(rows.id);
      if(data && data.length >=1){
        this.bankList = data;
        this.visible = true;
      }else{
        this.$message.error('暂无绑定银行卡');
      }
    }
  }
}
</script><!--scoped-->
<style lang="less">
  .seo-img{
    position: absolute;
    top: -3px;
    right: 7px;
    width: 128px;
  }
  .sox-img{
    position: absolute;
    top: -44px;
    right: 10px;
    width: 128px;
  }
  .plipay-img{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 128px;
  }
  .cash-link{
    font-size: 18px;
    margin-bottom: 4px;
    display: block;
    font-weight: bold;
  }
  .cash-input .ant-input-prefix{
    font-size: 20px;
  }
  .cash-input .ant-input{
    padding-left: 40px !important;
    border: 0 !important;
    height: 60px !important;
    font-size: 20px !important;
    border-bottom: 1px solid #ececec !important;
  }
  .cash-amount{
    color: #333;
  }
  .account-box{
    padding: 20px 40px 0;
    margin-bottom: 20px;
    background: #fff;
    position: relative;
    .account-title {
        white-space: nowrap;
        font-size: 16px;
        font-weight: 700;
        color: rgba(0,0,0,.9);
        line-height: 24px;
        padding-bottom: 14px;
        position: relative;
    }
    .account-title:before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background:#2469f2;
        position: absolute;
        left: -14px;
        top: 8px;
    }
    .account-list{
      display: flex;
      padding-top: 20px;
      padding-bottom: 40px;
      margin-left: 2%;
    }
    .account-money{
      padding-left: 18px;
      padding-top: 45px;
      min-width: 500px;
      padding-right: 40px;
      display: flex;
    }
    .account-le-amount{
      padding-left: 18px;
      flex: 1;
    }
    .account-le-amount span{
          font-size: 30px;
      font-weight: 700;
      color: #000;
      line-height: 35px;
      display: block;
    }
    .account-le-amount label{
      padding-top: 8px;
      font-size: 14px;
      color: rgba(0,0,0,.6);
      line-height: 20px;
      display: block;
    }
    .account-body{
      flex: 1;
    }
    .borders{
      border-left: 1px dashed #adadad;
      padding-left: 58px;
      position: relative;
    }
    .account-ams{
      padding: 8px 0;
      margin: 0;
      display: flex;
    }
    .account-label{
         color: rgba(0,0,0,.6);
    white-space: nowrap;
        width: 110px;
    text-align: right;
    }
    .account-val{
          color: #000;
    }
    
  }
</style>